<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>样式Demo</title>
    <meta name="author" content="刘雅茜">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="jquery.knob.min.js"></script>
    <script src="jquery.ba-throttle-debounce.min.js"></script>
    <script src="jquery.redcountdown.js"></script>
    <style>
        main{
            min-width: 1200px;
            width: 1200px;
            margin: 0 auto;
        }
       h2{
           margin-top: 200px;
       }
       h4{
           margin-top: 50px;
       }
    </style>
</head>

<body>
    <main>
       <h2 style="margin-top: 20px">彩色系列：</h2>                                
       <h4>flat-colors:</h4> <div id="rC_P1" class="redCountdownDemo"></div>
       <h4>flat-colors-fat:</h4> <div id="rC_P2" class="redCountdownDemo"></div>
       <h4>flat-colors-very-fat:</h4> <div id="rC_P3" class="redCountdownDemo"></div>
       <h4>flat-colors-black:</h4> <div id="rC_P4" class="redCountdownDemo"></div>
       <h2>白色系列：</h2>
       <h4>white:</h4> <div id="rC_P6" style="background-color: mediumpurple" class="redCountdownDemo"></div>
       <h4>white-fat:</h4> <div id="rC_P7" style="background-color: paleturquoise" class="redCountdownDemo"></div>
       <h4>white-very-fat:</h4> <div id="rC_P8" style="background-color: cornflowerblue" class="redCountdownDemo"></div>
       <h4>white-black:</h4> <div id="rC_P9" style="background-color: darksalmon" class="redCountdownDemo"></div>
       <h2>黑色系列：</h2>
       <h4>black:</h4> <div id="rC_P10" class="redCountdownDemo"></div>
       <h4>black-fat:</h4> <div id="rC_P11" class="redCountdownDemo"></div>
       <h4>black-black:</h4> <div id="rC_P12" class="redCountdownDemo"></div>
    </main>
</body>
<script type="text/javascript">

    // 简单快速的写法
    $('#rC_P1').redCountdown({ preset: "flat-colors", end: $.now() + 100 });
    $('#rC_P2').redCountdown({ preset: "flat-colors-fat", end: $.now() + 100 });
    $('#rC_P3').redCountdown({ preset: "flat-colors-very-fat", end: $.now() + 100 });
    $('#rC_P4').redCountdown({ preset: "flat-colors-black", end: $.now() + 100 });
    $('#rC_P6').redCountdown({ preset: "white",end: $.now() + 100});
    $('#rC_P7').redCountdown({ preset: "white-fat", end: $.now() + 100 });
    $('#rC_P8').redCountdown({ preset: "white-very-fat", end: $.now() + 100 });
    $('#rC_P9').redCountdown({ preset: "white-black", end: $.now() + 100 });
    $('#rC_P10').redCountdown({ preset: "black", end: $.now() + 100 });
    $('#rC_P11').redCountdown({ preset: "black-fat", end: $.now() + 100 });
    $('#rC_P12').redCountdown({ preset: "black-black", end: $.now() + 100 });

</script>

</html>